/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
<template>
  <div class="course">
    <div class="course_video" v-if="courseDetail.buyStatus !== 1">
      
      <iframe class="ifr-video" :src="courseDetail.link" style="width:100%;height:200px"></iframe>
      
      <!-- <div class="course_video"  id="videos">
        <span class="video-text van-ellipsis" v-if="notPlay">{{courseDetail.name}}</span>
      </div> -->
      <div
        class="video_message"
        :style="[{ height: nowheight }]"
        v-if="
          courseDetail.courseTypeName == '直播课程' &&
          passwordtext !== courseDetail.password
        "
        @click="doinputpasswoed"
      ></div>
    </div>
    <img :src="courseDetail.imgs" class="course_video" v-else />
    <div class="pl16 pr16">
      <course-explain
        :bordershow="true"
        :courseDetail="courseDetail"
      ></course-explain>
      <div class="course_introduce pb16 pt16">
        <div class="course_introduce_title">介绍</div>
        <div class="course_introduce_text">
          {{ courseDetail.description }}
        </div>
      </div>
      <div class="course_ecaluate pb16 pt16">
        <div class="course_ecaluate_title">
          <div class="ecaluate_title_text">评价</div>
          <div class="ecaluate_title_tool" @click="govideoecaluatepage">
            <span>更多</span>
            <img
              src="../../assets/icon/nav-enter.png"
              class="ecaluate_title_tool_icon"
            />
          </div>
        </div>
        <course-ecaluatelist :ecaluatelist="ecaluatelist"></course-ecaluatelist>
      </div>
    </div>
    <div class="course_video_tool flexcc" v-if="courseDetail.buyStatus === 1">
      <div class="video_tool_price">￥{{ courseDetail.fee.toFixed(2) }}</div>
      <div class="video_tool_btn flexcc" @click="govideopayment">立即付费</div>
    </div>
    <van-overlay :show="messageshow">
      <div class="wrapper">
        <div class="blockbox">
          <div class="block">
            <div class="hearder">输入密码</div>
            <div class="password_inputbox">
              <input
                class="password_input"
                type="text"
                v-model="passwordtext"
                placeholder="请输入直播密码"
              />
            </div>
          </div>
          <div class="message_tool">
            <div class="message_tool_btn" @click="goclosemessage">取消</div>
            <div class="message_tool_btn" @click="doopenpassword">确认</div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import CourseExplain from './course-explain'
import CourseEcaluatelist from './course-ecaluatelist'
import API from '../../services/index'
import Player from 'xgplayer'
import vanOverlay from 'vant/lib/overlay'
import { Dialog } from 'vant'
import 'vant/lib/rate/style'
import axios from 'axios'
import store from '@/store'

export default {
	components: {
		CourseExplain,
		CourseEcaluatelist,
		vanOverlay: vanOverlay,
		[Dialog.Component.name]: Dialog.Component,
	},
	data() {
		return {
			detailParams: {
				courseId: '',
			},
			courseDetail: {},
			ecaluatelist: [],
			player: '',
			messageshow: false,
			passwordtext: '',
			nowheight: '',
			notPlay: true,
      obj:{},//参数
		}
	},
	created() {
		this.detailParams.courseId = this.$route.params.courseId
		this.getcourseDetail()
		this.getcourseEvaluate()
	},
	// mounted() {
  //   axios
  //   //请求商城的token
  //   let storeToken
  //   axios({
  //       url:"/de/api/single/home/login",
  //       method:'post',
  //       headers:{
  //         authtoken:"eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl9tZW1iZXJfa2V5IjoiYjJkNGQ3ZDMtM2VkZC00YmM2LWJlNWEtN2QzNDQwZjNiNjY1In0.M87Uca9QXVpKftRXV3KJQAWqsWkNYsFcDkRL1UpGxcKltCa1HRqs5qyIo9z0iYZVabuoSMouL6tesR34Pk9iFQ"
  //       }
  //     }).then((ok)=>{
  //     console.log(ok.data.data.token)
  //      localStorage.setItem("storeToken",ok.data.data.token)
  //     }).catch((err)=>{
  //       consosle.log(err)
  //     })
  // },
	methods: {
		doopenpassword() {
			if (this.passwordtext === this.courseDetail.password) {
				this.messageshow = false
				this.player.play()
			} else {
				Dialog.alert({
					title: '提示',
					message: '请输入正确密码',
				}).then(() => {
					// on close
				})
			}
		},
		goclosemessage() {
			this.messageshow = false
			this.passwordtext = ''
		},
		doinputpasswoed() {
			this.messageshow = true
		},
		govideoecaluatepage() {
			this.$router.push({
				name: 'VideoEcaluate',
				params: {
					courseId: this.courseDetail.id,
					type: this.courseDetail.buyStatus,
				},
			})
		},
    //------------------------------------------
	async	govideopayment() {
      // let obj={
      //   goodsId:70,
      //   type:1,
      //   total:1,
      //   addressId:'',
      //  customParams: ''
      // }
      // obj.customParams=JSON.stringify([{"storeId":1061,"desc":null,"couponId":""}])
      // // 生成订单
      // const res = await API.generateStoreOrder({
			// 	data: this.obj,
      //   headers:{sysusertoken:localStorage.getItem("storeToken")}
			// })
      //  console.log(res)
      this.$router.push({
				name: 'VideoPayment',
				params: { id: this.courseDetail.id },
			})

    },
      	
		
    //--------------------------------------------------------
    //获取订单详情
		async getcourseDetail() {
			const res = await API.getcourseDetailAjax({
				params: this.detailParams,
			})
			if (!res.skillStar) {
				res.skillStar = 0
			}
			this.courseDetail = res
			//this.initVideo(res)
		},
    //预览订单
    async previewOrderDetail(params){
      const res = await API.submitStorePreview({
          params,
           headers:{sysusertoken:localStorage.getItem("storeToken")}
      })
    },
    // 商品评价
		async getcourseEvaluate() {
			const res = await API.getcourseEvaluateAjax({
				params: this.detailParams,
			})
			this.ecaluatelist = res
		},
		initVideo(params) {
			const that = this
			if (params.buyStatus === 1) return
			this.$nextTick(() => {
				// eslint-disable-next-line no-unused-vars
				this.player = new Player({
					id: 'videos',
					url: params.link,
					autoplay: false,
					width: '375px',
					height: '200px',
					poster: params.imgs,
					videoInit: true,
					hasStart: false,
					'x5-video-player-type': 'h5',
  				playsinline: false,
				})
				this.player.on('play', function () {
					that.buryingpoint(params)
					that.notPlay = false
				})
				this.player.once('complete', () => {
					const videdom = document.getElementById('videos')
					that.nowheight = videdom.style.height
				})
				this.player.on('pause', () => {
					this.notPlay = true
				})
			})
		},
		async buryingpoint(params) {
			// eslint-disable-next-line no-unused-vars
			const res = await API.getburyingpoint({
				params: { courseId: params.id },
			})
		},
	},
}
</script>
<style >
  .ifr-video body{overflow-y: hidden !important;}
</style>
<style scoped lang="scss">

.router-container{
  top: 0!important;
  height: 100%!important;
}
.course {
  padding: 0 !important;
  padding-bottom: 71px !important;
}
.course_video {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 16px;
  position: relative;
// 	box-sizing: border-box;
//   padding-top: 40px
  position: relative;
	.video-text{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 50%;
		margin-top: 12px;
		z-index: 2000;
		color: #FFFFFF;
		max-width: 60%;
	}
}
.video_message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
}
.course_introduce {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eeeeee;
  .course_introduce_title {
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    margin-bottom: 12px;
  }
  .course_introduce_text {
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 24px;
    color: #999999;
  }
}
.course_ecaluate {
  width: 100%;

  .course_ecaluate_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .ecaluate_title_text {
      font-size: 16px;
      line-height: 24px;
      color: #333333;
    }
    .ecaluate_title_tool {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 18px;
      color: #999999;
      .ecaluate_title_tool_icon {
        width: 7px;
        height: 12px;
        margin-left: 8px;
      }
    }
  }
}
.course_video_tool {
  width: 100%;
  height: 71px;
  background: #ffffff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 8px 16px;
  .video_tool_price {
    font-size: 18px;
    line-height: 22px;
    color: #e8541e;
  }
  .video_tool_btn {
    width: 160px;
    height: 44px;
    background: linear-gradient(315deg, #e8541e 0%, #ff7543 100%);
    border-radius: 2px;
    justify-content: center;
    font-size: 17px;
    line-height: 24px;
    color: #ffffff;
    opacity: 1;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  box-sizing: border-box;
  padding: 0 11px;
}
.blockbox {
  width: 252px;
  background: #ffffff;
  opacity: 1;
  border-radius: 4px;
}

.password_inputbox {
  width: 100%;
  height: 56px;
  background: #f9f9f9;
  opacity: 1;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 7px 12px;
  margin-bottom: 15px;
  margin-top: 11px;
}
.password_input {
  width: 100%;
  border: 0px;
  background: #f9f9f9;
}
.van-overlay {
  z-index: 999;
}
.hearder {
  width: 100%;
  font-size: 17px;
  line-height: 23px;
  color: #333333;
  opacity: 1;
  text-align: center;
  margin-top: 19px;
}
.message_tool {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.message_tool_btn {
  width: 50%;
  border-top: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 11px 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.message_tool_btn:nth-child(2) {
  border-left: 1px solid #eeeeee;
  color: #1681d8;
}
</style>
